<template>
  <div class="mainpg">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="mainor_te" style="align-items: center;">
        <div style="flex: 1;">
          <el-switch
            v-model="quadrants_switch"
            active-text="开"
            inactive-text="关"
            active-color="#03A98E"
            class="mainor_switch"
          ></el-switch>
          <el-tooltip
            class="item marginRight5 mainor_tei"
            effect="dark"
            placement="bottom"
          >
            <div slot="content">
              开启并圈定范围后，商城下单收货地址仅限范围内
              (后台代下单不受影响)。
            </div>
            <i class="el-icon-question"></i>
          </el-tooltip>
        </div>
        <div>
          <el-button @click="savemap">保存</el-button>
          <el-button class="marginLeft5" v-if="type == 1" @click="clearChange">
            取消圈选
          </el-button>
          <el-button type="primary" @click="startChange('polygonPath')">
            开始圈选
          </el-button>
        </div>
      </div>

      <div class="main_table main_white">
        <baidu-map
          :style="mapStyle"
          class="bm-view"
          ak="GPO8jLk2SoDXF5nnaOdDudHxIsMVEK6V"
          :center="center"
          :zoom="zoom"
          :scroll-wheel-zoom="true"
          @click="getClickInfo"
        >
          <bm-polygon
            :path="path"
            v-for="path of polygonPath.paths"
            :key="path.toString()"
            stroke-color="red"
            fill-color="#FB6160"
            :fill-opacity="0.2"
            :stroke-opacity="1"
            :stroke-weight="3"
            :editing="polygonPath.editing"
          />
          <!-- <bm-marker
            v-for="(item, index) in polygonPath.paths[0]"
            :position="item"
            :key="index"
            :dragging="false"
          ></bm-marker> -->

          <bm-geolocation
            anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
            @locationSuccess="locationSuccess"
            :showAddressBar="true"
            :autoLocation="true"
          ></bm-geolocation>
        </baidu-map>
      </div>
    </div>
  </div>
</template>

<script>
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { setting_company } from "@/api/currency";
import {
  BaiduMap,
  bmInfoWindow,
  BmMarker,
  BmPolygon,
  BmGeolocation
} from "vue-baidu-map";
import { setting_info } from "@/api/global/globalSystem";

export default {
  name: "BDMap",
  components: {
    BaiduMap,
    bmInfoWindow,
    BmMarker,
    BmPolygon,
    BmGeolocation
  },
  data() {
    return {
      quadrants_switch: false,
      center: { lng: 115.89352755, lat: 28.689578 },
      zoom: 13,
      mapStyle: {
        width: "100%",
        height: "670px"
      },
      type: 0,
      polygonPath: {
        editing: false,
        paths: []
      }
    };
  },
  methods: {
    savemap() {
      // console.log(this.polygonPath.editing);
      // if (this.quadrants_switch == true && this.polygonPath.editing == false) {
      //   this.$message.error("开启了请先圈选");
      //   return;
      // }

      // if (!this.polygonPath.editing) {
      //   return;
      // }

      this["polygonPath"].editing = !this["polygonPath"].editing;

      const { paths } = this.polygonPath;

      if (!paths.length) {
        paths.push([]);
      }

      let arr = [];

      if (paths[0].length > 2) {
        this.polygonPath.paths[0].map(e => {
          arr.push({
            lat: e.lat,
            lng: e.lng
          });
        });
      }

      let params = {
        quadrants_switch: (this.quadrants_switch = this.quadrants_switch
          ? 1
          : 0),
        quadrants: this.quadrants_switch == true ? JSON.stringify(arr) : []
      };

      this.type = 0;

      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, this.current)) +
              apiUrl().appsecret
          )
        },
        apiUrl().name,
        params
      );
      setting_company(data).then(res => {
        if (res.errcode == 0) {
          this.$message.success("保存成功");
          this.list();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },

    list() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, this.current)) +
              apiUrl().appsecret
          )
        },
        apiUrl().name
      );
      setting_info(data).then(res => {
        if (res.errcode == 0) {
          // console.log(res.data.info.quadrants_switch)
          this.quadrants_switch =
            res.data.info.quadrants_switch == 1 ? true : false;
          this.polygonPath.paths[0] = JSON.parse(res.data.info.quadrants);
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },

    //清除圈选
    clearChange() {
      this.type = 0;
      this.polygonPath.editing = false;
      this.polygonPath.paths = [];
    },
    //开始圈选
    startChange(name) {
      this.type = 1;
      this[name].editing = !this[name].editing;
      // 在这里做一步判断，如果有路径且开启绘制就把原来的路径清空
      if (this.polygonPath.paths) {
        this.polygonPath.paths = [];
      }
    },
    //地图鼠标事件
    getClickInfo(e) {
      if (!this.polygonPath.editing) {
        return;
      }
      const { paths } = this.polygonPath;
      !paths.length && paths.push([]);
      paths[0].push(e.point);
    },

    locationSuccess(e) {
      this.center.lng = e.point.lng;
      this.center.lat = e.point.lat;
    }
  },
  created() {
    this.list();
  }
};
</script>
<style lang="scss" scoped>
.mainor_form form {
  width: calc(100% - 120px);
}
.mainor_te {
  display: flex;
  background-color: white;
  padding: 16px 10px;
}
.main_table {
  min-height: 670px;
  padding: 0 10px;
}
</style>
